<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"/>
    <title>支付宝付款</title>
    <script th:src="@{/js/qrcode.min.js}"></script>
    <script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
    <style>
        html, body {
            width: 100%;
            min-height: 100%;
            margin: 0;
            padding: 0;
            font-size: 14px;
        }
        .wrapper {
            margin: 0 auto;
            max-width: 900px;
            min-height: 100vh;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
        .mobile-wrapper {
            width: 100%;
            max-width: 400px;
            min-width: 320px;
            min-height: 600px;
            padding: 30px;
            box-sizing: border-box;
            background-color: #3787bf;
        }
        .mobile-wrapper .content-top {
            margin: auto;
            padding: 10px 0 20px;
            background: #fff;
            border-radius: 5px;
        }
        .mobile-wrapper .logo {
            text-align: center;
        }
        .mobile-wrapper .logo img {
            width: 28%;
            height: 28%;
        }
        .mobile-wrapper .info {
            line-height: 20px;
            text-align: center;
            display: none;
        }
        .mobile-wrapper .qrcode {
            text-align: center;
        }
        .mobile-wrapper .qrcode img {
            display: inline !important;
            padding: 15px;
        }
        .mobile-wrapper .qrcode .msg {
            display: inline-block;
            padding: 120px 0;
        }
        .mobile-wrapper .money {
            font-size: 30px;
            font-weight: 500;
            text-align: center;
            color: #1f1f1f;
        }
        .mobile-wrapper .money .wait-text {
            color: #aeaeae;
            font-size: 15px;
            line-height: 20px;
            padding-bottom: 6px;
        }
        .mobile-wrapper .warning {
            color: red;
            text-align: center;
            font-size: 22px;
            padding-top: 6px;
            display: none;
        }

        .mobile-wrapper .content-bottom {
            margin-top: 10px;
            padding: 10px 15px;
            background: #fff;
            border-radius: 5px;

        }
        .mobile-wrapper .pay-line {
            font-size: 16px;
            line-height: 24px;
        }
        .mobile-wrapper .pay-line:first-child {
            margin-bottom: 8px;
        }
        .mobile-wrapper .money-discount {
            float: right;
            font-weight: 500;
        }
        .mobile-wrapper .monet-pay {
            float: right;
            font-weight: 500;
        }
        .mobile-wrapper .tip {
            font-size: 14px;
            font-weight: 500;
            text-align: center;
            color: red;
            margin-top: 4px;
        }

        .tutorial .title {
            margin-top: 60px;
            text-align: center;
            font-size: 30px;
        }
        .tutorial .info {
            font-size: 24px;
            line-height: 30px;
            margin-bottom: 14px;
            text-align: center;
        }
        .tutorial .info:first-child {
            padding-bottom: 8px;
        }
        .tutorial .img-show {
            height: 330px;
            position: relative;
            overflow: hidden;
        }
        .tutorial .img-show img {
            position: absolute;
            top: -100px;
        }


        .blueColor {
            color: #32a8f9;
        }
        .redColor {
            color: #209be5;
        }

        @media screen and (max-width: 800px) {
            .wrapper {
                justify-content: space-around;
            }
            .mobile-wrapper .logo {
                padding: 0 0 10px;
            }
            .mobile-wrapper .info {
                display: block;
                padding-bottom: 8px;
            }
            .tutorial {
                display: none;
            }
        }

        @media screen and (max-width: 500px) {
            .wrapper {
                margin: 0;
                width: 100%;
                min-height: 100vh;
            }
            .mobile-wrapper {
                width: 100%;
                max-width: 500px;
                min-height: 100vh;
            }
        }

        @media screen and (max-width: 380px) {
            .mobile-wrapper .tip {
                font-size: 12px;
            }
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class='mobile-wrapper'>
        <div class='content-top'>
            <div class="logo">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564807323415&di=a27874288d85d1f20ec2c68dfac2dcfe&imgtype=0&src=http%3A%2F%2Fimgup02.iefans.net%2Fiefans%2F2018-12%2F14%2F10%2F15447556537899_1.jpg"
                     alt="logo"/>
            </div>
            <div class="info">
                打开
                <span class="blueColor">支付宝APP</span>
                ，点击<span class="blueColor">“扫一扫”</span>
            </div>
            <div class="info">
                点击<span class="blueColor">“相册”</span>
            </div>
            <div id="qrcode" class="qrcode">
                <img id="loading" style=" width: 80%; max-width: 230px;" src="https://staticjy.oss-cn-hangzhou.aliyuncs.com/loading.gif" alt="二维码" />
            </div>
            <div id="amount" class="money">
                <div class="wait-text">二维码加载中</div>
                <div class="wait-text">请耐心等待</div>
            </div>
            <div id="wraning" class="warning">
                请用手机扫码,或者截屏保存再进行扫码
                </br>
                <label th:text="${channelOrder.childOrderno}"></label>
            </div>
        </div>
        <div class="content-bottom">
            <div class="pay-line" style="text-align: center;">
                <label>剩余支付时间:</label><label style="color: #ff9655" id="min"></label>：<label style="color: #ff9655" id="second"></label>
            </div>
            <div class="pay-line">
                <span>实付金额</span>
                <span id="pay-amount" class="blueColor monet-pay">计算中...</span>
            </div>
        </div>
    </div>
    <div class="tutorial">
        <h3 class="title">支付宝付款教程</h3>
        <div class="info">
            打开
            <span class="redColor">支付宝APP</span>
            ，点击<span class="blueColor">“扫一扫”</span>
        </div>
        <div class="info">
            点击<span class="blueColor">“相册”</span>
        </div>
        <div class="img-show">
            <img  src="https://staticjy.oss-cn-hangzhou.aliyuncs.com/WechatIMG18.jpeg" alt="图片" width="376">
        </div>
    </div>
</div>

<script th:inline="javascript">
    var time = [[${time}]];
    time = parseInt(time/1000);
    function getClockString(str){
        if(str<10){
            return '0'+str;
        }
        return str;
    }
    function clock() {
        var  min =  getClockString(parseInt(time/60));
        var second =  getClockString(parseInt(time%60));
        document.getElementById("min").innerHTML = ( min );
        document.getElementById("second").innerHTML = ( second);
        if (min <= 0 && second <= 0) {
            return;
        }
        time--;
        setTimeout(function(){clock()}, 1000);
    }
    clock();



    $().ready(function() {
        window.alert('注意：苹果手机使用建行APP或者龙支付APP 付款不到账！');
        getData();
    })

    function getData() {
        // 定时器
        var interval = window.setInterval(function () {
            var orderId = [[${channelOrder.orderId}]];
            var url = "../orderStatus/" + orderId;
            $.get(url, function (data) {
                if (data.data.cardId.indexOf("http")===0) {
                    // 说明已经取到二维码了
                    $("#loading").remove();
                    window.clearInterval(interval);
                    $("#qrcode").empty();
                    var qrcode = new QRCode(document.getElementById("qrcode"));
                    qrcode.makeCode(data.data.cardId);
                    $('#qrcode img').removeAttr('alt')
                    $("#amount").html("<span>￥" + data.data.amount + "</span>");
                    $("#wraning").css("display", "block");
                    $("#pay-amount").text(data.data.amount);
                    location.href = "alipays://platformapi/startapp?appId=20000067&url=" + encodeURIComponent(data.data.cardId);
                    getStatus();
                }
            })
        }, 2000)
    }

    function getStatus() {
        // 定时器
        var interval2 = window.setInterval(function () {
            var orderId = [[${channelOrder.orderId}]];
            var url = "../orderStatus/" + orderId;
            $.get(url, function (data) {
                if (data.data.successTime) {
                    window.clearInterval(interval2);
                    $('#qrcode').html('<div style="color: red;font-size: 25px;">支付成功,切勿重复支付!</div>')
                } else if (data.data.orderStatus == '4') {
                    window.clearInterval(interval2);
                    $('#qrcode').html('<div style="color: red;font-size: 25px;">订单超时,切勿付款!</div>')
                }
            })
        }, 5000)
    }

    function getUrlParam(name) {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null) return  unescape(r[2]);
        return null;
    }
</script>
<noscript>您的浏览器不支持javascript</noscript>
</body>
</html>